<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>睿途题库 - 管理后台</title>
    
    <!-- SEO 相关 Meta 标签 -->
    <meta name="description" content="睿途题库管理系统 - 专业的在线题库管理平台，提供题目管理、考试安排、数据分析等功能">
    <meta name="keywords" content="题库管理,在线考试,教育平台,题目管理,考试系统,数据分析">
    <meta name="author" content="睿途教育科技">
    <meta name="robots" content="noindex, nofollow">
    <meta name="generator" content="睿途题库管理系统">
    
    <!-- 移动端优化 -->
    <meta name="format-detection" content="telephone=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="睿途题库">
    <meta name="theme-color" content="#2563eb">
    
    <!-- 社交媒体分享 Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="睿途题库 - 管理后台">
    <meta property="og:description" content="专业的在线题库管理平台，提供题目管理、考试安排、数据分析等功能">
    <meta property="og:site_name" content="睿途题库">
    <meta property="og:locale" content="zh_CN">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="睿途题库 - 管理后台">
    <meta name="twitter:description" content="专业的在线题库管理平台，提供题目管理、考试安排、数据分析等功能">
    
    <!-- 安全相关 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' https:; img-src 'self' data: https:;">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    
    <!-- 浏览器兼容性 -->
    <meta name="msapplication-TileColor" content="#2563eb">
    <meta name="msapplication-config" content="browserconfig.xml">
    
    <!-- 预加载关键资源 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    
    <!-- 网站图标 -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/remixicon.min.css" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <link href="assets/css/ruitu.css" rel="stylesheet">
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col bg-education">
    <!-- 背景装饰元素 -->
    <div class="absolute inset-0 overflow-hidden -z-10">
        <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-primary/10 animate-float">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-6xl education-icon">
                <i class="ri-book-2-line text-xl"></i>
            </div>
        </div>
        <div class="absolute bottom-20 right-20 w-60 h-60 rounded-full bg-secondary/10 animate-float" style="animation-delay: -2s">
            <div class="w-full h-full flex items-center justify-center text-secondary/20 text-7xl education-icon">
                <i class="ri-graduation-cap-line text-xl"></i>
            </div>
        </div>
        <div class="absolute top-1/3 right-1/4 w-32 h-32 rounded-full bg-accent/10 animate-float" style="animation-delay: -4s">
            <div class="w-full h-full flex items-center justify-center text-accent/20 text-5xl education-icon">
                <i class="ri-lightbulb-line text-xl"></i>
            </div>
        </div>
        <div class="absolute bottom-1/3 left-1/3 w-28 h-28 rounded-full bg-primary/10 animate-float" style="animation-delay: -1s">
            <div class="w-full h-full flex items-center justify-center text-primary/20 text-4xl education-icon">
                <i class="ri-pencil-line text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300">
        <div class="flex items-center justify-between px-4 h-[72px] max-w-7xl mx-auto">
            <div class="flex items-center flex-1 justify-center">
                <a href="admin-dashboard.html" class="flex items-center space-x-2 mr-6 absolute left-4">
                    <div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
                        <i class="ri-question-answer-line text-lg"></i>
                    </div>
                    <h1 class="text-lg font-bold text-dark">睿途题库管理系统</h1>
                </a>
                
                <!-- 顶部导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="admin-dashboard.html" class="nav-item" data-section="dashboard" onclick="showMenu('dashboard-menu')">
                        <i class="ri-dashboard-line mr-2"></i> 仪表盘
                    </a>
                    <a href="#" class="nav-item" data-section="textbook" onclick="showMenu('textbook-menu')">
                        <i class="ri-book-open-line mr-2"></i> 教材版本
                    </a>
                    <a href="question-list.html" class="nav-item" data-section="question">
                        <i class="ri-book-2-line mr-2"></i> 题库管理
                    </a>
                    <a href="#" class="nav-item" data-section="exam">
                        <i class="ri-graduation-cap-line mr-2"></i> 考试管理
                    </a>
                    <a href="#" class="nav-item" data-section="statistics">
                        <i class="ri-bar-chart-2-line mr-2"></i> 数据分析
                    </a>
                    <a href="#" class="nav-item active" data-section="settings">
                        <i class="ri-settings-3-line mr-2"></i> 系统设置
                    </a>
                </div>
            </div>
            
            <div class="flex items-center">
                <button class="flex items-center justify-center w-8 h-8 text-muted hover:text-primary transition-colors relative">
                    <i class="ri-notification-3-line text-xl"></i>
                    <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"></span>
                </button>
                <div class="flex items-center ml-1">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <span class="hidden md:inline text-sm font-medium text-dark ml-2">张老师</span>
                    <i class="ri-arrow-down-s-line text-muted ml-0.5"></i>
                </div>
                <button class="md:hidden ml-1 w-8 h-8 flex items-center justify-center text-muted hover:text-primary transition-colors" id="mobile-menu-button">
                    <i class="ri-menu-line text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow flex">
        <!-- 左侧导航栏 -->
        <aside id="sidebar" class="w-56 bg-sidebar-bg shadow-sidebar transition-all duration-300 h-[calc(100vh-72px)] sticky top-[72px] overflow-y-auto">
            <!-- 仪表盘菜单 -->
            <div id="dashboard-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">仪表盘</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-dashboard-3-line"></i>
                        <span>数据概览</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-line"></i>
                        <span>趋势分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-2-line"></i>
                        <span>数据报表</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-notification-2-line"></i>
                        <span>系统通知</span>
                    </div>
                </div>
            </div>
            
            <!-- 教材版本菜单 -->
            <div id="textbook-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">教材版本</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>人教版</span>
                    </div>
                    <div class="pl-8">
                        <div class="sidebar-item">
                            <span>七年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>七年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>八年级下册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级上册</span>
                        </div>
                        <div class="sidebar-item">
                            <span>九年级下册</span>
                        </div>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>北师大版</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-book-open-line"></i>
                        <span>苏教版</span>
                    </div>
                    <div class="border-t border-gray-200 my-2"></div>
                    <div class="sidebar-item">
                        <i class="ri-add-line"></i>
                        <span>添加新版本</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-line"></i>
                        <span>版本管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 题库管理菜单 -->
            <div id="question-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">题库管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <a href="question-list.html" class="flex items-center space-x-3">
                            <i class="ri-file-list-3-line"></i>
                            <span>题目列表</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>添加题目</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-folder-line"></i>
                        <span>题目分类</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-price-tag-3-line"></i>
                        <span>标签管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-flag-line"></i>
                        <span>待审核题目</span>
                    </div>
                </div>
            </div>
            
            <!-- 考试管理菜单 -->
            <div id="exam-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">考试管理</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-calendar-line"></i>
                        <span>考试安排</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-file-text-line"></i>
                        <span>试卷管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-add-circle-line"></i>
                        <span>创建试卷</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-group-line"></i>
                        <span>考生管理</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-check-double-line"></i>
                        <span>成绩管理</span>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析菜单 -->
            <div id="statistics-menu" class="sidebar-menu hidden">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">数据分析</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item">
                        <i class="ri-bar-chart-line"></i>
                        <span>答题统计</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-line-chart-fill"></i>
                        <span>学习进度</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-pie-chart-line"></i>
                        <span>正确率分析</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-line"></i>
                        <span>用户行为</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-download-line"></i>
                        <span>数据导出</span>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置菜单 -->
            <div id="settings-menu" class="sidebar-menu active">
                <div class="p-4 border-b border-gray-200">
                    <h3 class="text-lg font-bold text-muted uppercase tracking-wider text-center">系统设置</h3>
                </div>
                <div class="p-2">
                    <div class="sidebar-item active">
                        <a href="site-settings.html" class="flex items-center space-x-3">
                            <i class="ri-global-line"></i>
                            <span>站点设置</span>
                        </a>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-user-settings-line"></i>
                        <span>注册设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-settings-4-line"></i>
                        <span>基础设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-shield-keyhole-line"></i>
                        <span>安全设置</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-admin-line"></i>
                        <span>角色权限</span>
                    </div>
                    <div class="sidebar-item">
                        <i class="ri-database-2-line"></i>
                        <span>数据备份</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 内容区域 -->
        <div class="flex-grow p-6">
            <div class="flex items-center justify-center h-full">
                <h1 class="text-4xl font-bold text-primary">欢迎使用睿途题库系统！</h1>
            </div>
        </div>
    </main>

    <!-- JavaScript 库文件 -->
    <script src="assets/js/tailwind.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f90ff',
                        accent: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        muted: '#64748b',
                        'sidebar-bg': '#f8fafc',
                        'sidebar-item': '#64748b',
                        'sidebar-item-active': '#2563eb',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 15px 35px -5px rgba(37, 99, 235, 0.15)',
                        'sidebar': '0 0 20px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        };
    </script>
    
    <!-- 页面功能脚本 -->
    <script>
        // 导航菜单切换
        const navItems = document.querySelectorAll('.nav-item');
        const sidebarMenus = document.querySelectorAll('.sidebar-menu');

        // 显示指定菜单
        function showMenu(menuId) {
            sidebarMenus.forEach(menu => {
                if (menu.id === menuId) {
                    menu.classList.remove('hidden');
                    menu.classList.add('active');
                    // 激活该菜单的第一个项目
                    const firstItem = menu.querySelector('.sidebar-item');
                    if (firstItem) {
                        menu.querySelectorAll('.sidebar-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        firstItem.classList.add('active');
                    }
                } else {
                    menu.classList.add('hidden');
                    menu.classList.remove('active');
                }
            });
        }

        // 激活指定的导航项和对应的侧边栏菜单
        function activateNavSection(section) {
            // 更新顶部导航状态
            navItems.forEach(nav => {
                if (nav.dataset.section === section) {
                    nav.classList.add('active');
                } else {
                    nav.classList.remove('active');
                }
            });
            
            // 显示对应的侧边栏菜单
            showMenu(`${section}-menu`);
        }

        // 为导航项添加点击事件
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                const section = item.dataset.section;
                activateNavSection(section);
            });
        });

        // 移动端菜单
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const sidebar = document.getElementById('sidebar');

        if (mobileMenuButton && sidebar) {
            mobileMenuButton.addEventListener('click', () => {
                sidebar.classList.toggle('-translate-x-full');
            });
        }

        // 侧边栏菜单项点击
        function initSidebarItems() {
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            sidebarItems.forEach(item => {
                item.addEventListener('click', (e) => {
                    // 防止链接跳转时重复处理
                    if (item.querySelector('a')) {
                        return;
                    }
                    
                    const parentMenu = item.closest('.sidebar-menu');
                    if (parentMenu && !parentMenu.classList.contains('hidden')) {
                        parentMenu.querySelectorAll('.sidebar-item').forEach(si => {
                            si.classList.remove('active');
                        });
                        item.classList.add('active');
                    }
                });
            });
        }

        // 初始化页面时激活仪表盘
        document.addEventListener('DOMContentLoaded', () => {
            activateNavSection('dashboard');
            initSidebarItems();
        });
    </script>
</body>
</html> 